import {createStackNavigator} from 'react-navigation-stack';
import React from 'react';

import AboutScreen from '../pages/about/about-screen';
import MyScreen from '../pages/my/my-screen';
import SettingScreen from '../pages/setting/setting-screen';
import ProfileScreen from '../pages/profile/profile-screen';
import IconFont from '../resource/iconfont';
import {getRealSize} from '../utils';
import AlbumScreen from '../pages/album/album-screen';
import AssociateScreen from '../pages/associate/associate-screen';
import ServiceScreen from '../pages/service/service-screen';
import ServiceRecordScreen from '../pages/service/service-record-screen';
import ResetpwdScreen from '../pages/resetpwd/resetpwd-screen';
import CheckoutScreen from '../pages/service/checkout-screen';
import {I18n} from '../reducers/intl';
import LocationScreen from '../pages/location/location-screen';
import ProductSettingScreen from '../pages/product-setting/product-setting-screen';
import {Platform} from 'react-native';

const MyNavigator = createStackNavigator(
  {
    My: MyScreen,
    About: AboutScreen,
    Setting: SettingScreen,
    Profile: ProfileScreen,
    Album: AlbumScreen,
    Associate: AssociateScreen,
    Service: ServiceScreen,
    ServiceRecord: ServiceRecordScreen,
    Resetpwd: ResetpwdScreen,
    Checkout: CheckoutScreen,
    Location: LocationScreen,
    ProductSetting: ProductSettingScreen,
  },
  {
    initialRouteName: 'My',
    navigationOptions: ({navigation}) => {
      const options = {
        headerBackTitleStyle: Platform.OS === 'ios' && {
          height: 0,
          width: 0,
        },
        title: I18n.t('page.title.my'),
        tabBarIcon: ({focused, tintColor}) => (
          <IconFont
            name={focused ? 'molarmenu-my-fill' : 'molarmenu-my-half'}
            color={tintColor}
            size={getRealSize(22)}
          />
        ),
        tabBarVisible: navigation.state.index < 1,
      };
      return options;
    },
  },
);

export default MyNavigator;
